<template>
    <div class="container">
        <div class="top">
            <div class="admin_tu">
                <img v-if="user_info.HeadImgUrl" :src="user_info.HeadImgUrl"/>
                <img v-else src="../assets/img/avatar.png"/>
            </div>
            <div class="userinfo">
                <div>ID: {{user_info.ID ? user_info.ID : '请关注公众号'}}</div>
                <div>
                    <div v-if="user_info.VipExpireAt" class="novip vv">
                        <img src='../assets/img/20180820110131.png'>
                    </div>
                    <div v-else class="novip">VIP</div>
                    <div v-if="user_info.VipExpireAt" class="vip">已购买VIP</div>
                    <div v-else class="vip">未购买VIP</div>
                    <div class="yu_e">书币余额：<span class="coins">{{user_info.TotalCoins ? user_info.TotalCoins : '0'}}</span></div>
                </div>
                <div class="time">{{user_info.VipExpireAt ? renderTime(user_info.VipExpireAt) : ''}}</div>
            </div>
        </div>
        <!--<div class="divide"></div>-->
        <!--<div class="item">-->
            <!--<router-link :to="{path:'/read',query:{}}"><span>签到送书币</span><img src="../assets/img/20180815141527.png"></router-link>-->
        <!--</div>-->
        <div class="divide"></div>
        <div class="item">
            <router-link to="/chongzhi"><span>书币充值</span><span><img class="item-img" src="../assets/img/20180903131455.png"><img src="../assets/img/20180815141527.png"></span></router-link>
        </div>
        <div class="divide"></div>
        <div class="item vip">
            <router-link to="/vip"><div class="img"></div><div><div class="vzi">开通VIP会员</div><div class="vzi_2">365天每天1元畅读所有小说</div></div><img src="../assets/img/20180815141527.png"></router-link>
        </div>
        <div class="divide"></div>
        <div class="item">
            <router-link to="/bookrack"><span>我的书架</span><img src="../assets/img/20180815141527.png"></router-link>
        </div>
        <div class="divide"></div>
        <bottom :i="icon"></bottom>
    </div>
</template>

<script>
    import bottom from './bottom'
    export default {
        name: "my",
        components:{
            bottom,
        },
        data(){
            return{
                user_info: [],
                icon: 3,
            }
        },
        created:function () {
            this.set()
            this.user()
            document.title = '我的';
        },
        methods:{
            //底部菜单
            set:function(){
                this.$emit('set',3)
            },
            renderTime(date) {
                let dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
            },
            //个人信息
            user:function () {
                this.$axios.get('/user-info').then(response=>{
                    if(response){
                        this.user_info=response.data.user
                    }else{
                        this.user_info = []
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .container{
        background: white;
    }
    .top{
        display: flex;
        align-items: center;
        margin: 0px 20px 10px;
        font-size: 0.9rem;
        padding-top: 20px;
    }
    .divide{
        margin: 5px 0px;
        width: 100%;
        height: 0.7rem;
        background: #f3f4f5;
    }
    .time{
        font-size: 0.8rem;
        margin-bottom: 0px !important;
        color: #999;
    }
    .vv{
        background: white!important;
        height: 1.5rem!important;
    }
    .vv img{
        width: 1.6rem;
    }
    .admin_tu{
        margin-right: 15px;
    }
    .admin_tu img{
        width: 3.8rem;
        height: 3.8rem;
        border-radius: 50%;
    }
    .userinfo{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .userinfo>div{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .novip{
        text-align: center;
        width: 2rem;
        height: 1rem;
        background: gray;
        color: white;
        border-radius: 5px;
        font-size: 14px;
    }
    .vip{
        margin-left: 5px;
        padding-right: 10px;
        border-right: 1px solid #d8d8d8;
    }
    .yu_e{
        margin: 0px 10px 0px;
        color: #3688FF;
    }
    .item a{
        background: white;
        padding: 10px 20px;
        margin-top: 10px;
        display: flex;
        font-size: 0.9rem;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        color: black;
    }
    .item a img{
        width: 0.9rem;
        vertical-align: middle;
    }
    .item-img{
        width: 10rem !important;
        margin-right: 20px;
    }
    .vip a{
        padding: 0px;
        padding-right: 10px;
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: black;
    }
    .img{
        background: url(../assets/img/vip@2x.png) no-repeat;
        background-size: 100%;
        width: 5rem;
        height: 5rem;
    }
    .vzi{
        font-size: 1.5rem;
        color: #3688FF;
    }
    .vzi_2{
        color: #999;
    }
</style>
